<!--
 * @Date: 2025-06-30 15:34:37
 * @LastEditors: Csir 2215995096@qq.com
 * @LastEditTime: 2025-07-03 15:03:56
 * @FilePath: \yujin-ui-admin\src\views\wujie\order\index.vue
-->

<template>
  <div class="container">
    <div class="app-container">
      <WujieVue
        width="100%"
        height="100%"
        name="guanlanchang"
        :url="childrenUrl"
        :sync="true"
        :exec="false"
        :alive="true"
        :degrade="false"
        :props="wujieProps"
        :plugins="[
          {
            patchElementHook(element, iframeWindow) {
              // if (element.nodeName === 'SCRIPT') {
              //   element.crossOrigin = 'anonymous' // 添加跨域属性
              // }
              if (element.nodeName == 'STYLE') {
                //处理element 样式问题
                element.insertAdjacentElement = function (_position, ele) {
                  iframeWindow.document.head.appendChild(ele)
                }
              }
            }
          }
        ]"
      />
    </div>
  </div>
</template>
<script setup>
import { getAccessToken } from '@/utils/auth'
import { ref } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { onMounted, onUnmounted } from 'vue'

import WujieVue from 'wujie-vue3'
const { bus } = WujieVue

const route = useRoute()
const router=useRouter()

const token = getAccessToken()

const childrenUrl =route.meta.query.host?route.meta.query.host: 'http://192.168.8.125:8000/'

const Authorization = `${token}`

const fetchAPIMethod = () => {
  console.log('子应用调用主应用方法')
  router.push('/login')
}

const wujieProps = computed(() => ({
  jumpLogin: fetchAPIMethod,
  info: {
    token: Authorization,
    url: route.meta.query.sub // 确保这里使用最新值
  }
}))

watch(
  () => route.meta.query.sub,
  (newVal) => {
    if (newVal) {
      bus.$emit('update-props', {
        info: {
          token: Authorization,
          url: newVal
        }
      })
    }
  },
  {
    immediate: true,
    deep: true
  }
)
</script>
<style scoped lang="less">
.app-container {
  width: 100%; /* 固定宽度 */
  height: 100%; /* 固定高度 */
  position: absolute; /* 固定位置 */
  top: 50%; /* 距离顶部的位置 */
  left: 50%; /* 距离左边的位置 */
  transform: translate(-50%, -50%); /* 使容器居中 */
  overflow: hidden; /* 隐藏超出部分 */
}
</style>
